<template>
  <div>
    <h1>调拨新增页面</h1>
    <el-button type="primary" plain @click="addPro">保存</el-button>

    <div>
    <el-form :inline="true" :model="pro" class="demo-form-inline">
      <el-form-item label="出库仓库" >
        <template v-slot="s">
          <el-select v-model="pro.ckId" placeholder="出库仓库" @change="getgoodslist($event,s.row)">
            <el-option v-for="c in cangku" :label="c.name" :value="c.id" :key="c.id"></el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item label="入库仓库">
        <template v-slot="s">
        <el-select v-model="pro.rkId" placeholder="入库仓库" @change="getStashDeposit($event,s.row)">
          <el-option v-for="c in cangku" :label="c.name" :value="c.id" :key="c.id"></el-option>
        </el-select>
        </template>
      </el-form-item><br>
      <el-form-item label="批次号">
        <el-input v-model="pro.batchNumber" placeholder="批次号"></el-input>
      </el-form-item>
      <el-form-item label="出入库时间">
        <el-date-picker
            v-model="pro.indate"
            type="datetime"
            value-format="yyyy-MM-dd"
            placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item><br>
      <el-form-item label="备注">
        <el-input type="textarea" :rows="2" v-model="pro.remark" placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>



      <el-input  placeholder="-----------------出入库明细信息--------------------------------------------------------------------------------------------------------------"></el-input>


      <el-button type="primary" plain @click="toadd">添加</el-button>
      <el-button type="primary" plain @click="del">删除</el-button>
      <el-table
          ref="multipleTable"
          :data="tabledate"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            label="pic"
            width="120">
          <template v-slot="s">
            <el-image
                style="width: 100px; height: 100px"
                :src="s.row.pic"
                ></el-image>
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="goodsNo"
            label="编码">
        </el-table-column>
        <el-table-column
            prop="specification"
            label="规格型号">
        </el-table-column>
        <el-table-column
            prop="cname"
            label="仓库名称">
        </el-table-column>

        <el-table-column
            prop="xname"
            label="存放位置">
          <template v-slot="s">
            <el-cascader
                v-model="tabledate[s.$index].wid"
                :options="stashDeposit"
                :props="{emitPath:false}"
                :show-all-levels="false"></el-cascader>
          </template>
        </el-table-column>


<!--        <el-cascader-->
<!--            v-model="goodsData[scope.$index].wid"-->
<!--            :options="haiz"-->
<!--            :props="{emitPath:false}"-->
<!--            :show-all-levels="false"></el-cascader>-->

        <el-table-column
            prop="units"
            label="计量单位">
        </el-table-column>
        <el-table-column
            prop="type"
            label="类型">
        </el-table-column>
        <el-table-column
            prop="num"
            label="数量">
        </el-table-column>
        <el-table-column
            prop="nums"
            label="数量">
          <template slot-scope="scope">
          <el-input v-model="tabledate[scope.$index].nums" placeholder="调拨数量"></el-input>
          </template>
        </el-table-column>
      </el-table>





      <el-dialog title="添加货物" :visible.sync="dialogTableVisible">


        <el-container>
          <el-header>
            查找条件
            <el-form :inline="true" :model="pro" class="demo-form-inline">
            <el-form-item label="仓库">
              <el-select v-model="pro.ckId" placeholder="出库仓库">
                <el-option v-for="c in cangku" :label="c.name" :value="c.id" :key="c.id"></el-option>
              </el-select>

            </el-form-item>
            </el-form>
          </el-header>
          <el-container>
            <el-aside width="200px">
              <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-aside>
            <el-main>

              <el-table
                  ref="multipleTable"
                  :data="gridData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChanges">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    label="pic"
                    width="120">
                  <template v-slot="s">
                    <el-image
                        style="width: 100px; height: 100px"
                        :src="s.row.pic"
                    ></el-image>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="物品"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="goodsNo"
                    label="编码">
                </el-table-column>
                <el-table-column
                    prop="specification"
                    label="规格型号">
                </el-table-column>
                <el-table-column
                    prop="cname"
                    label="仓库名称">
                </el-table-column>
                <el-table-column
                    prop="xname"
                    label="存放位置">
                </el-table-column>
                <el-table-column
                    prop="units"
                    label="计量单位">
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="类型">
                </el-table-column>
                <el-table-column
                    prop="num"
                    label="数量">
                </el-table-column>
              </el-table>

              <el-button type="primary" @click="addtableData">确定</el-button>
            </el-main>
          </el-container>
        </el-container>





      </el-dialog>

    </div>
  </div>
</template>

<script>
export default {
  name: "AddProView",
  data(){
    return{
      pro:{

      },
      tabledate:[],
      dialogTableVisible:false,
      data:[],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      gridData:[],
      cangku:[],
      pros:{},
      zhongzhuan:[],
      stashDeposit:[],
      nums:'',
      wid:'',
      rqPro:[],
    }
  },methods:{
    del(){
      console.log("删除："+this.rqPro);
      this.rqPro=[];
      this.rqPro.splice(0);
    },
    addPro(){
      this.pro.tableDatas=this.rqPro;
      this.axios.post("/provoke/addPro",this.pro).then(()=>{
        this.$message.success("添加成功");
        this.$router.push("/provoke");
      });
    },
    getStashDeposit(row){
      let depositId=row;
      this.axios.post("/provoke/getStashDeposit?depositId="+depositId).then(res=>{
        this.stashDeposit=res.data.data;
      })
    },
    addtableData(){
      this.tabledate=this.zhongzhuan;
      this.dialogTableVisible=false;
    },
    getgoodslist(row){
      let ckId=row;
      this.axios.post("/provoke/getgoodslist?ckId="+ckId).then(res=>{
        this.gridData=res.data.data;
      })
    },
    handleSelectionChanges(val) {
      this.multipleSelection = val;
      this.zhongzhuan=val;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
      this.rqPro=val;
    },

    getcangku(){
      this.axios.post("/provoke/getcangku").then(res=>{
        this.cangku=res.data.data;
      })
    },
    getMg(){
      this.axios.post("/provoke/getMg").then(res=>{
        this.data=res.data.data;
      })
    },
    toadd(){
      this.dialogTableVisible=true;
    },
    handleNodeClick(data) {
      console.log(data.id);
    },

  },created() {
    this.getMg();
    this.getcangku();

  }
}
</script>

<style scoped>

</style>